import React, { useState, useEffect, memo, useCallback } from 'react';
import axios from 'axios';

const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || '';

const VisitorCounter = memo(() => {
  const [visitorCount, setVisitorCount] = useState(0);
  const [todayCount, setTodayCount] = useState(0);
  const [showDetails, setShowDetails] = useState(false);
  const [loading, setLoading] = useState(true);

  const updateVisitorData = useCallback(() => {
    const storedTotalCount = localStorage.getItem('totalVisitorCount') || 0;
    const storedTodayKey = `visitorCount_${new Date().toISOString().split('T')[0]}`;
    const storedTodayCount = localStorage.getItem(storedTodayKey) || 0;
    
    // 转换为数字
    const totalCount = parseInt(storedTotalCount, 10);
    const todayCount = parseInt(storedTodayCount, 10);
    
    // 更新计数
    const newTotalCount = totalCount + 1;
    const newTodayCount = todayCount + 1;
    
    // 保存更新后的计数
    localStorage.setItem('totalVisitorCount', newTotalCount);
    localStorage.setItem(storedTodayKey, newTodayCount);
    
    // 更新状态
    setVisitorCount(newTotalCount);
    setTodayCount(newTodayCount);
    setLoading(false);
  }, []);

  useEffect(() => {
    updateVisitorData();
  }, [updateVisitorData]);

  return (
    <div 
      className="relative"
      onMouseEnter={() => setShowDetails(true)}
      onMouseLeave={() => setShowDetails(false)}
    >
      <div className="flex items-center space-x-2 bg-white/20 backdrop-blur-sm rounded-xl p-2 cursor-pointer hover:bg-white/30 transition-all duration-300">
        <div className="w-8 h-8 flex items-center justify-center bg-gradient-to-r from-blue-500 to-purple-500 rounded-lg shadow-sm">
          <span className="text-sm font-medium text-white">👥</span>
        </div>
        <div className="text-sm font-medium text-gray-700">
          {loading ? (
            <span className="inline-block w-6 h-4 bg-gray-200 animate-pulse rounded"></span>
          ) : (
            visitorCount.toLocaleString()
          )}
        </div>
      </div>
      
      {/* 详细信息弹出框 */}
      {showDetails && (
        <div className="absolute top-full right-0 mt-2 bg-white rounded-lg shadow-lg p-4 z-50 w-56 border border-gray-100 transition-all duration-300">
          <div className="text-center">
            <h4 className="font-semibold text-gray-800 mb-3">访问统计</h4>
            {loading ? (
              <div className="space-y-2 py-2">
                <div className="h-4 bg-gray-200 rounded animate-pulse"></div>
                <div className="h-4 bg-gray-200 rounded animate-pulse"></div>
              </div>
            ) : (
              <div className="space-y-3">
                <div className="flex justify-between items-center">
                  <span className="text-gray-600">今日访问:</span>
                  <span className="font-medium text-blue-600 bg-blue-50 px-2 py-1 rounded">
                    {todayCount.toLocaleString()}
                  </span>
                </div>
                <div className="flex justify-between items-center">
                  <span className="text-gray-600">总访问量:</span>
                  <span className="font-medium text-purple-600 bg-purple-50 px-2 py-1 rounded">
                    {visitorCount.toLocaleString()}
                  </span>
                </div>
                <div className="text-xs text-gray-400 mt-2">
                  最后更新: {new Date().toLocaleTimeString()}
                </div>
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  );
});

VisitorCounter.displayName = 'VisitorCounter';

export default VisitorCounter;